import dash
from dash import html, Output, Input, State
import feffery_antd_components as fac
import re

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.Div(
            [
                html.Div(
                    fac.AntdTitle(
                        'XXX系统用户注册',
                        level=2
                    ),
                    style={
                        'textAlign': 'center',
                        'marginBottom': '40px'
                    }
                ),
                fac.AntdForm(
                    [
                        fac.AntdFormItem(
                            fac.AntdInput(
                                id='username'
                            ),
                            id='username-item',
                            label='用户名',
                            required=True,
                            tooltip='这是一个提示信息'
                        ),
                        fac.AntdFormItem(
                            fac.AntdInput(
                                id='password',
                                mode='password'
                            ),
                            id='password-item',
                            label='密码',
                            required=True
                        ),
                        fac.AntdFormItem(
                            fac.AntdInput(
                                id='password-confirm',
                                mode='password'
                            ),
                            id='password-confirm-item',
                            label='确认密码',
                            required=True
                        ),
                        fac.AntdFormItem(
                            fac.AntdInput(
                                id='email'
                            ),
                            id='email-item',
                            label='邮箱'
                        ),
                        fac.AntdFormItem(
                            fac.AntdButton(
                                '提交注册',
                                id='submit',
                                type='primary'
                            ),
                            wrapperCol={
                                'offset': 5
                            }
                        )
                    ],
                    labelCol={
                        'span': 5
                    },
                    wrapperCol={
                        'span': 19
                    }
                )
            ],
            style={
                'width': '500px',
                'boxShadow': '0 6px 16px rgb(107 147 224 / 14%)',
                'padding': '40px',
                'position': 'fixed',
                'top': '25%',
                'left': '50%',
                'transform': 'translateX(-50%)'
            }
        )
    ]
)


@app.callback(
    [
        Output('password-item', 'validateStatus'),
        Output('password-item', 'help'),
        Output('password-confirm-item', 'validateStatus'),
        Output('password-confirm-item', 'help')
    ],
    [
        Input('submit', 'nClicks'),
        Input('password', 'value'),
        Input('password-confirm', 'value')
    ]
)
def validate_password(nClicks, password, password_confirm):
    # 若确认注册按钮已被点击过
    if nClicks:
        # 检查密码是否有输入
        if not password:
            return [
                'error',
                '请完善密码设置！',
                None,
                None
            ]
        # 检查确认密码是否有输入
        elif not password_confirm:
            return [
                None,
                None,
                'error',
                '请完善密码设置！'
            ]
        # 检查两次密码是否相同
        elif password != password_confirm:
            return [
                None,
                None,
                'error',
                '两次密码输入不一致！'
            ]

        return [
            None,
            None,
            'success',
            '密码输入一致！'
        ]

    # 否则确认注册按钮未被点击过
    # 若密码有输入且确认密码有输入
    if password and password_confirm:
        # 若两次密码输入不一致
        if password != password_confirm:
            return [
                None,
                None,
                'error',
                '两次密码输入不一致！'
            ]

        return [
            None,
            None,
            'success',
            '密码输入一致！'
        ]

    return [None] * 4


@app.callback(
    [
        Output('username-item', 'validateStatus'),
        Output('username-item', 'help')
    ],
    [
        Input('submit', 'nClicks'),
        Input('username', 'value')
    ]
)
def validate_username(nClicks, username):
    # 若确认注册按钮已被点击过
    if nClicks:
        # 若用户名为空
        if not username:
            return ['error', '用户名不能为空！']

        # 限制用户名不能以数字开头
        elif re.match('\d+', username):
            return ['error', '用户名不能以数字开头！']

        return ['success', '格式符合要求！']

    return [None] * 2


@app.callback(
    [
        Output('email-item', 'validateStatus'),
        Output('email-item', 'help')
    ],
    [
        Input('submit', 'nClicks'),
        Input('email', 'value'),
    ]
)
def confirm_email(nClicks, email):
    # 若确认注册按钮已被点击过
    if nClicks:
        # 检查邮箱格式
        pattern = "[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?"
        if email and not re.match(pattern, email):
            return ['error', '邮箱格式不符合要求！']

    return [None] * 2


if __name__ == '__main__':
    app.run_server(debug=True)
